<template>
  <div class="road__left">
    <commonTitle title="当日指标分析"></commonTitle>
    <div class="road__count">
      <div class="road__count-info">
        <span class="road__count-info--small">今日气温</span>
        <span>35℃~48℃</span>
        <span class="road__count-info--small">空气质量等级</span>
        <span>优</span>
      </div>
      <div class="road__count-data">
        <div class="road__count-data-value">
          <span>200</span>
          <span>当日空气质量</span>
        </div>
      </div>
    </div>
    <commonTitle title="颗粒物风向动态">
      <common-select
        v-model:value="data.value"
        placeholder="类型"
        :optionsList="data.options"
        @change="handleChange"
      >
      </common-select>
    </commonTitle>
    <div class="road__hy">
      <common-tag
        v-model="data.klwValue"
        placeholder="类型"
        :optionsList="data.klwOptions"
        @change="handleChange"
      >
      </common-tag>
      <echartRadar
        ref="echartRadarRef"
        echartId="echartRadar"
        :titleList="data.titleList"
      ></echartRadar>
    </div>
    <commonTitle title="设备24小时数据">
      <common-select
        v-model:value="data.value24"
        placeholder="类型"
        :optionsList="data.options24"
        @change="handleChanges"
      >
      </common-select>
    </commonTitle>
    <div class="road__jy">
      <common-tag
        v-model="data.klwValues"
        placeholder="类型"
        :optionsList="data.klwOptions"
        @change="handleChanges"
      >
      </common-tag>

      <echartLine ref="echartLineRef" echartId="echartLine" :pieData="data.pieData"></echartLine>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import icon1 from '@/assets/image/roadTransport/icon1.png'
import icon2 from '@/assets/image/roadTransport/icon2.png'
import echartRadar from './echartRadar.vue'
import echartLine from './echartLine.vue'
import * as api from '@/api/roadTransport.js'
const data = reactive({
  value: '设备a',
  options: [
    {
      value: '设备a',
      label: '设备a'
    },
    {
      value: '设备b',
      label: '设备b'
    }
  ],
  klwOptions: [
    {
      value: 'PM2.5',
      label: 'PM2.5'
    },
    {
      value: 'PM10',
      label: 'PM10'
    }
  ],
  klwValue: 'PM2.5',
  klwValues: 'PM2.5',
  hyclList: [],

  value24: '站点1',
  options24: [
    {
      value: '站点1',
      label: '站点1'
    },
    {
      value: '站点2',
      label: '站点2'
    }
  ],
  jyhList: [
    {
      title: '危货(辆)',
      value: 0
    },
    {
      title: '货物普货兼危货(辆)',
      value: 0
    },
    {
      title: '普货(辆)',
      value: 0
    }
  ],
  baseInfo: {},
  TStation: [],
  titleList: [
    { value: '13μg/m³', label: '北向' },
    { value: '12μg/m³', label: '南向' },
    { value: '18μg/m³', label: '东向' },
    { value: '16μg/m³', label: '西向' }
  ],
  pieData: {
    xData: ['14时', '15时', '16时', '17时', '18时', '19时', '20时'],
    yData: [
      { name: 'PM2.5', data: [120, 282, 111, 234, 120, 282, 111, 234] },
      { name: 'PM10', data: [320, 132, 201, 334, 320, 132, 201, 334] }
    ]
  }
})
const getTrucksCar = () => {
  const params = {
    county: '511300'
  }
  api.trucksCar(params).then((res) => {
    console.log(res)
    Object.keys(res.data).forEach((v) => {
      console.log(v)
      const temp = {
        title: v,
        value: res.data[v].n
      }
      data.hyclList.push(temp)
    })
  })
}

const getTruckspPerson = () => {
  const params = {
    county: '511300'
  }
  api.truckspPerson(params).then((res) => {
    data.baseInfo = res.data
  })
}

const getHousehold = () => {
  const params = {
    county: '511300'
  }
  api.household(params).then((res) => {
    data.jyhList[0].value = res.data?.WPerson?.n
    data.jyhList[1].value = res.data?.PWPerson?.n
    data.jyhList[2].value = res.data?.PPerson?.n
  })
}

const getStation = () => {
  const params = {
    county: '511300'
  }
  api.station(params).then((res) => {
    console.log(res)
    data.TStation = res.data.TStation.map((v) => {
      console.log(v)

      const tempArray = v.location.split(',')
      const temp = {
        lng: tempArray[0] ? tempArray[0] : 0,
        lat: tempArray[1] ? tempArray[1] : 0,
        title: v.stationName
      }
      return temp
    })
  })
}

const handleChange = () => {
  echartRadarRef.value.drwaEchart()
}

const handleChanges = () => {
  echartLineRef.value.drwaEchart()
}


const echartRadarRef = ref()
const echartLineRef = ref()
onMounted(() => {
  echartRadarRef.value.drwaEchart()
  echartLineRef.value.drwaEchart()
  // getTrucksCar()
  // getTruckspPerson()
  // getHousehold()
  // getStation()
})
</script>

<style lang="less">
// .small-titile{
//   color: #fff;
//   background-image: url("../../../assets/image/roadTransport/small-title.png");
//   background-size: 100% 100%;
//   height: 38px;
//   padding: 10px 38px;
//   font-size: 20px;
// }
.road__left {
  width: 428px;
  margin-left: 44px;
  margin-bottom: 44px;
  pointer-events: auto;
  .road__choose {
    .el-select .el-input__wrapper > input {
      font-size: 16px;
      font-family: 'PingFang SC-中黑体, PingFang SC';
      font-weight: normal;
      color: #cfc8ff !important;
      line-height: 16px;
      text-align: right;
    }
  }
  .road__count {
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 34px 16px 34px 36px;
    .road__count-info {
      display: flex;
      flex-direction: column;

      font-family: Source Han Sans CN;
      font-size: 24px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;

      color: #d4e8f8;

      .road__count-info--small {
        display: inline-block;
        margin: 14px 0;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;

        color: #9bcfff;
      }
    }
    .road__count-data {
      position: relative;
      width: 170px;
      height: 170px;
      background: url('../../../assets/image/home/yuan.png') no-repeat;
      background-size: 100% 100%;
      .road__count-data-value {
        position: absolute;
        top: 20%;
        right: -18%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        > span:nth-of-type(1) {
          font-family: YouSheBiaoTiHei;
          font-size: 48px;
          font-weight: 600;
          line-height: normal;
          letter-spacing: 0em;

          color: #d4e8f8;

          text-shadow: 0px 0px 12px 0px rgba(50, 160, 244, 0.6);
        }
        > span:nth-of-type(2) {
          font-family: YouSheBiaoTiHei;
          font-size: 16px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          color: #d4e8f8;
          text-shadow: 0px 0px 12px 0px rgba(50, 160, 244, 0.6);
        }
      }
    }
  }
  .road__hy {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 34px 16px;
  }
  .road__jy {
    display: flex;
    flex-direction: column;
    padding: 8px 0px 8px 16px;
  }
}
</style>
